<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="SchekotovYV">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,700&display=swap&subset=cyrillic" rel="stylesheet">
    <title>folio</title>
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <div class="wrapper_container">
                
                    <div class="header__logo">
                        <a href="#" class="header__logo-icon"></a>
                        <a href="#" class="header__close-logo"></a>
                    </div>
                    <div class="header__navegation">
                        <h2 class="header__text">  a <span>not so</span> different <span>folio</span></h2>
                        <nav class="header__link">
                            <ul>
                                <li><a href="#about">about</a></li>
                                <li><a href="#work">work</a></li>
                                <li><a href="#">blog</a></li>
                                <li><a href="#">contact</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="header__network">
                        <a href="#" class="header__twitter"></a>
                        <a href="#" class="header__facebook"></a>
                        <a href="#" class="header__instagram"></a>
                        <a href="#" class="header__vimeo"></a>
                        <a href="#" class="header__Behance"></a>
                    </div> 
            </div> 
        </header>
        <section class="greeting">
            <div class="wrapper_container">
                <h2 class="greeting__accent">hey!<a name="about"></a></h2>
                <div class="greeting__content">
                    <img src="img/img.png" alt="">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore texercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. (+) 
                    </p>
                </div>
            </div>
        </section>.
        <section class="work">
            <div class="wrapper_container">
                <h2 class="work__head">
                    <span>check</span> this out!<a name="work"></a> 
                </h2>
                <img src="img/shape-10.png" class="work__wave">
                <div class="work__portfolio">
                    <div class="work__card-1">
                        <p class="work__card-1-text">
                            heclem magazine <span>editorial design</span>
                        </p>
                        <img src="img/heclem.png" alt="heclem magazine" class="work__card-1-img">
                    </div>
                    <div class="work__card-2">
                        <p class="work__card-2-text">
                            alt-j fall tour <span>graphic design</span>
                        </p>
                        <img src="img/altj.png" alt="alt-j" class="work__card-2-img">
                    </div>
                    <div class="work__card-3">
                        <p class="work__card-3-text">
                            elegant theme <span>web design</span>
                        </p>
                        <img src="img/tv.png" alt="" class="work__card-3-img">
                    </div>
                    <img src="img/strips.png" class="work__strips">
                    <img src="img/slash.png" class="work__slash">
                    <div class="work__card-4">
                        <p class="work__card-4-text">
                            magazine <span>editorial design</span>
                        </p>
                        <img src="img/book.png" alt="magazine" class="work__card-4-img">
                    </div>
                    <div class="work__card-5">
                        <p class="work__card-5-text">
                            argo <span>branding</span>
                        </p>
                        <img src="img/a-4.png" alt="argo" class="work__card-5-img">
                    </div>
                </div>
                <a class="work__link" href="#">more</a>
            </div>
        </section>
        <section class="clients">
            <div class="wrapper_container">
                <p class="clients__head"><span>our</span> clients!<a name="clients"></a></p>
                <div class="clients__our">
                    <div class="clients__label1"><img src="img/microsoft.png" alt="microsoft"></div>
                    <div class="clients__label2"><img src="img/shape-13.png"></div>
                    <div class="clients__label3"><img src="img/behance.png" alt="behance"></div>
                    <div class="clients__label4"><img src="img/twitter.png" alt="twitter"></div>
                    <div class="clients__label5"><img src="img/shape-14.png"></div>
                    <div class="clients__label6"><img src="img/evernote.png" alt="evernote"></div>
                    <div class="clients__label7"><img src="img/apple.png" alt="apple"></div>
                    <div class="clients__label8"><img src="img/google.png" alt="google"></div>
                </div>
            </div>
        </section>
        <section class="blog">
            <div class="wrapper_container">
                <h2 class="blog__header"><span>the</span> blog!</h2>
                <div class="blog__card">
                    <img src="img/pc.jpg" alt="" class="blog__img">
                    <div class="blog__content">
                        <time class="blog__data">12 february 2015</time>
                        <h3 class="blog__content-head">ain't no rest for the wicked</h3>
                        <p class="blog__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore texercaitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
                        </p>
                        <a href="" class="blog__link">open post</a>
                    </div>
                </div>
                <div class="blog__card">
                    <img src="img/shape.png" alt="" class="blog__accent">
                    <img src="img/flower.jpg" alt="" class="blog__img">
                    <div class="blog__content">
                        <time class="blog__data">10 february 2015</time>
                        <h3 class="blog__content-head">money don’t grow on trees</h3>
                        <p class="blog__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore texercaitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
                        </p>
                        <a href="" class="blog__link">open post</a>
                    </div>
                </div>
                <a href="" class="blog__other">check more posts</a>
            </div>     
        </section>
        <section class="contact">
            <div class="wrapper_container">
                <h2 class="contact__head"><span>get in</span> touch!</h2>
                <div class="contact__item">
                    <div class="contact__address">
                        <h3 class="contact__address-head">Our Location</h3>
                        <address class="contant__text">
                            123 Different Street Lisbon, Portugal 1200 - 000
                            (+351) 123 456 789 
                            Tiago Narciso
                        </address>
                        <a href="#" class="content__link">Say Hello!</a>
                        <div class="content__network">
                            <a href="" class="content__twitter"></a>
                            <a href="" class="content__facebook"></a>
                            <a href="" class="content__instagram"></a>
                            <a href="" class="content__vimeo"></a>
                            <a href="" class="content__Behance"></a>
                        </div>
                    </div>
                    <img src="img/layer-26.png" alt="" class="contact__map">
                </div>
            </div>
        </section>
        <footer class="footer">
            <img src="img/layer-29.png" alt="" class="footer__logo">
            <p class="copyright">www.tiagonarciso.com © 2015 Tiago Narciso</p>
        </footer>
    </div>
    <script src="js/scripts.js"></script>
</body>
</html>